Date'ist edasi: Valda JavaScripti tulevikku Temporal Polyfilli abil

Aastakümneid on arendajad üle maailma jaganud ühist muret: JavaScripti Date-objekti. See on olnud lugematute vigade, hilisõhtuste silumissessioonide ja rahvusvahelistamise peavalude allikas. Selle muudetav olemus, segadusttekitav API ja kurikuulsalt halb ajavööndite tugi on muutnud robustse kuupäeva- ja ajaloogika loomise märkimisväärseks väljakutseks. Kuid see ajastu on lõpuks lõppemas.

Sisenege Temporali API maailma – see on kaasaegne, kõikehõlmav ja suurepäraselt disainitud ettepanek, mis muudab kuupäevade ja kellaaegade käsitlemise JavaScriptis revolutsiooniliseks. See pakub arendajatele muutumatu, selgesõnalise ja võimsa tööriistakomplekti. Ainus konks? See pole veel kõigis veebilehitsejates ja JavaScripti käituskeskkondades saadaval. Siin tulebki mängu Temporal Polyfill. See on sild tulevikku, mis võimaldab teil kirjutada puhast, usaldusväärset ja tulevikukindlat kuupäeva/aja koodi juba täna. See juhend viib teid sügavale sellesse, miks peate vana Date-objekti selja taha jätma ja kuidas oma globaalsete rakenduste jaoks Temporal Polyfilli meisterlikult kasutada.

Miks me peame JavaScripti `Date`-objektist edasi liikuma

Enne lahenduse uurimist on oluline mõista probleemi sügavust. Kui olete JavaScriptiga mõnda aega töötanud, olete tõenäoliselt kokku puutunud järgmiste probleemidega:

• Muudetavuse hullus: Date-objekt on muudetav. Kui edastate Date-objekti funktsioonile, võib see funktsioon selle väärtust muuta, mis viib ettearvamatute kõrvalmõjude ja vigadeni, mida on uskumatult raske jälitada. Kujutage ette funktsiooni, mis arvutab tuleviku kuupäeva ja muudab kogemata algset alguskuupäeva, mida kasutatakse mujal teie rakenduses.
• Segadusttekitav ja ebajärjekindel API: API on täis veidrusi. getMonth() tagastab väärtuse 0 (jaanuar) kuni 11 (detsember), samas kui getDate() tagastab 1-31. See ebakõla on komistanud põlvkondade kaupa arendajaid. Meetodid nagu getYear() on ammu aegunud ja tekitavad veelgi rohkem segadust.
• Ajavööndite õudusunenägu: See on ehk suurim valupunkt globaalsete rakenduste jaoks. Date-objekt põhineb kasutaja süsteemi ajal. Arvutuste tegemine erinevates ajavööndites on keeruline, vigaderohke ja nõuab sageli raskeid kolmandate osapoolte teeke. Lihtsad küsimused nagu „Mis kell on Tokyos, kui New Yorgis on kell 9:00?” muutuvad märkimisväärseks väljakutseks.
• Üks suurus ei sobi kellelegi: Date-objekt esindab alati kindlat ajahetke (ajatempli). Puudub puhas viis esindada ainult kuupäeva (nagu sünnipäev, '2023-10-26') või ainult kellaaega (nagu igapäevane äratus, '08:30:00'). See sunnib arendajaid haldama ja ignoreerima ebaolulisi aja- või kuupäevakomponente, lisades tarbetut keerukust.

Pilk tulevikku: `Temporal` API

Temporal API on TC39 komitee (organ, mis standardiseerib JavaScripti) poolt algusest peale loodud, et lahendada kõik need probleemid. See on ehitatud mõnele põhiprintsiibile, mis muudavad sellega töötamise nauditavaks:

• Muutumatus: Iga Temporali objekt on muutumatu. Kui teete toimingu, näiteks lisate kuupäevale 5 päeva, ei muuda see algset objekti. Selle asemel tagastab see uue Temporali objekti uuendatud väärtusega. See kõrvaldab tohutu hulga vigu.
• Selge ja üheselt mõistetav API: API on loodud olema selge ja ennustatav. Meetoditel on mõistlikud nimed (nt dayOfWeek asemel getDay) ja kuud on 1-põhised (1 jaanuari jaoks). Mida näed, seda saad.
• Esmaklassiline ajavööndi ja kalendri tugi: Ajavööndid ei ole järelmõte; need on põhifunktsioon. Saate hõlpsasti luua kuupäevi kindlates ajavööndites, teisendada nende vahel ja käsitleda enesekindlalt keerukusi nagu suveaeg (DST). See sisaldab ka tuge mitte-Gregoriuse kalendritele.
• Rikkalik tüüpide valik igaks vajaduseks: Ühe monoliitse objekti asemel pakub Temporal spetsialiseeritud objektide komplekti erinevateks kasutusjuhtudeks, muutes teie koodi väljendusrikkamaks ja täpsemaks.

Sild tänase ja homse vahel: Mis on Temporal Polyfill?

Polyfill (mõiste, mis on tuletatud pahtli kaubamärgist Polyfilla) on koodijupp, mis pakub kaasaegset funktsionaalsust vanemates keskkondades, mis seda loomulikult ei toeta. See täidab lüngad veebilehitseja või käituskeskkonna veebistandardite implementatsioonis.

Temporal API on uus standard. Kuigi see on TC39 protsessi 4. etapis (lõplik etapp), võtab veebilehitsejate tootjatel ja Node.js-i haldajatel aega selle natiivne rakendamine. Temporal Polyfill (@js-temporal/polyfill) on kvaliteetne, kogukonna hallatav teek, mis rakendab kogu Temporal API spetsifikatsiooni JavaScriptis. Lisades selle oma projekti, saate kasutada globaalset Temporal-objekti ja kõiki selle meetodeid, justkui oleksid need juba keskkonda sisse ehitatud. Kui veebilehitsejad lõpuks natiivse toe lisavad, jätkab teie kood sujuvalt töötamist, sageli jõudluse kasvuga.

Projekti seadistamine Temporal Polyfilliga

Alustamine on lihtne. Saate lisada polyfilli oma projekti oma lemmikpaketihalduriga.

Paigaldamine paketihalduriga

Node.js-i kasutavate projektide või ehitusetapiga esiotsa projektide (nagu need, mis kasutavad Webpacki, Vitet või Parcelit) jaoks avage oma terminal ja käivitage:

npm:

            npm install @js-temporal/polyfill
            

              
                Copy
              
            
          

yarn:

            yarn add @js-temporal/polyfill
            

              
                Copy
              
            
          

pnpm:

            pnpm add @js-temporal/polyfill
            

              
                Copy
              
            
          

Projekti importimine

Pärast installimist peate selle lihtsalt üks kord oma rakenduse sisenemispunkti (nt oma peamises index.js või main.ts failis) importima. See muudab Temporal-objekti globaalselt kättesaadavaks.

            // Impordi polyfill oma peamise rakendusfaili ülaosas
import { Temporal } from '@js-temporal/polyfill';

// Nüüd saate Temporali kasutada kõikjal oma rakenduses!
const now = Temporal.Now.plainDateTimeISO();
console.log(now.toString());
            

              
                Copy
              
            
          

CDN-i kasutamine veebilehitsejas

Lihtsate veebilehtede, demode või veebipõhiste koodiredaktorite nagu CodePen jaoks saate polyfilli lisada otse CDN-i skriptimärgendiga oma HTML-faili. Asetage see enne oma skripte, mis kasutavad `Temporal`-i.

            <!DOCTYPE html>
<html>
<head>
  <title>Temporal Polyfill Demo</title>
  <!-- Laadi polyfill CDN-ist -->
  <script src="https://cdn.jsdelivr.net/npm/@js-temporal/polyfill/dist/index.umd.js"></script>
</head>
<body>
  <script>
    // Temporal-objekt on nüüd globaalselt saadaval
    const today = Temporal.Now.plainDateISO();
    console.log(`Tänane kuupäev on ${today.toString()}`);
    document.body.innerText = `Tänane kuupäev on ${today.toString()}`;
  </script>
</body>
</html>
            

              
                Copy
              
            
          

Praktiline ülevaade `Temporal`-objektidest (koos Polyfilli näidetega)

Uurime Temporali pakutavaid põhilisi objekte. Nende mõistmine avab 99% teie kuupäeva/aja manipuleerimise vajadustest.

`Temporal.PlainDate`: Sünnipäevade, pühade ja aastapäevade jaoks

See objekt esindab kalendrikuupäeva ilma aja- või ajavöönditeabeta. See on ideaalne, kui hoolite ainult aastast, kuust ja päevast.

            // PlainDate'i loomine (aasta, kuu, päev)
const releaseDate = new Temporal.PlainDate(2025, 7, 18);
console.log(releaseDate.toString()); // "2025-07-18"

// Komponentide saamine (kuud on 1-põhised!)
console.log(releaseDate.year);     // 2025
console.log(releaseDate.month);    // 7
console.log(releaseDate.day);      // 18
console.log(releaseDate.dayOfWeek); // 5 (reede)

// Muutumatus tegevuses: päevade lisamine tagastab UUE objekti
const oneWeekLater = releaseDate.add({ days: 7 });
console.log(releaseDate.toString());   // "2025-07-18" (originaal on muutmata)
console.log(oneWeekLater.toString()); // "2025-07-25"
            

              
                Copy
              
            
          

`Temporal.PlainTime`: Igapäevaste äratuste ja lahtiolekuaegade jaoks

See esindab seina-kella aega ilma kuupäeva või ajavööndita. Mõelge äriaegadele või korduvale äratusele.

            // PlainTime'i loomine (tund, minut, sekund)
const openingTime = new Temporal.PlainTime(9, 0, 0);
console.log(openingTime.toString()); // "09:00:00"

const closingTime = Temporal.PlainTime.from('17:30');
console.log(closingTime.toString()); // "17:30:00"

// Aegade võrdlemine
const appointmentTime = new Temporal.PlainTime(10, 15);
console.log(Temporal.PlainTime.compare(appointmentTime, openingTime)); // 1 (kohtumine on hiljem)
            

              
                Copy
              
            
          

`Temporal.PlainDateTime`: Kohalike kohtumiste jaoks ilma ajavööndi mitmetähenduslikkuseta

See ühendab `PlainDate` ja `PlainTime`. See esindab kindlat kuupäeva ja kellaaega, kuid on siiski ajavööndist lahti ühendatud. See on ideaalne kohaliku hambaarsti aja broneerimiseks, kus ajavöönd on kaudselt mõistetav.

            const localAppointment = new Temporal.PlainDateTime(2024, 12, 10, 14, 30);
console.log(localAppointment.toString()); // "2024-12-10T14:30:00"

// Saate lisada kestusi
const oneHourLater = localAppointment.add({ hours: 1 });
console.log(oneHourLater.toString()); // "2024-12-10T15:30:00"
            

              
                Copy
              
            
          

`Temporal.ZonedDateTime`: Globaalsete rakenduste kangelane

See on kõige võimsam tüüp rahvusvaheliste rakenduste jaoks. See esindab täpset ajahetke kindlas ajavööndis. See mõistab suveaega ja seda saab täpselt teisendada mis tahes muusse ajavööndisse.

            // ZonedDateTime'i loomine sündmuse jaoks Tokyos
// Ajavööndid kasutavad IANA identifikaatoreid (nt 'Asia/Tokyo', 'Europe/London')
const tokyoLaunch = new Temporal.ZonedDateTime(
  978307200000000000n, // Nanosekundid Unixi ajastu algusest
  'Asia/Tokyo'
);
console.log(tokyoLaunch.toString()); // "2001-01-01T09:00:00+09:00[Asia/Tokyo]"

// Uurige välja, mis kell see on New Yorgis oleva inimese jaoks
const newYorkTime = tokyoLaunch.withTimeZone('America/New_York');
console.log(newYorkTime.toString()); // "2000-12-31T19:00:00-05:00[America/New_York]"

// Praeguse aja saamine kindlas ajavööndis
const nowInDubai = Temporal.Now.zonedDateTimeISO('Asia/Dubai');
console.log(`Praegune aeg Dubais: ${nowInDubai.toPlainTime()}`);
            

              
                Copy
              
            
          

`Temporal.Instant`: Universaalne, masinloetav ajatempel

`Instant` esindab ühte täpset punkti globaalsel ajajoonel, sõltumata kalendrist või ajavööndist. Seda mõõdetakse nanosekundites Unixi ajastu algusest ja see on alati UTC-s. See sobib ideaalselt serverilogide, API ajatemplite ja andmebaasikirjete jaoks.

            // Hangi praegune täpne ajahetk
const now = Temporal.Now.instant();
console.log(now.toString()); // nt, "2023-10-26T14:45:12.123456789Z"

// Instant-objektide võrdlemine on lihtne ja usaldusväärne
const later = now.add({ seconds: 30 });
console.log(Temporal.Instant.compare(now, later)); // -1 (now on varasem)
            

              
                Copy
              
            
          

`Temporal.Duration`: Ajavahemike selge arvutamine

`Duration`-objekt esindab ajavahemikku, näiteks „3 kuud, 2 nädalat ja 5 tundi”. See on arvutuste jaoks uskumatult kasulik.

            // Kestuse loomine
const projectDuration = Temporal.Duration.from({ weeks: 6, days: 3 });
console.log(projectDuration.toString()); // "P6W3D"

const startDate = new Temporal.PlainDate(2024, 1, 15);

// Lisage kestus kuupäevale
const deadline = startDate.add(projectDuration);
console.log(deadline.toString()); // "2024-02-29"

// Arvutage kahe kuupäeva vahe
const date1 = new Temporal.PlainDate(1999, 8, 24);
const date2 = new Temporal.PlainDate(2023, 10, 26);
const difference = date2.since(date1);
console.log(difference.toString()); // "P24Y2M2D" (24 aastat, 2 kuud, 2 päeva)
console.log(`Aastaid: ${difference.years}, Kuud: ${difference.months}, Päevi: ${difference.days}`);
            

              
                Copy
              
            
          

Reaalsete väljakutsete lahendamine Temporal Polyfilliga

Vaatame, kuidas need objektid lahendavad tavalisi ja praktilisi probleeme.

Kasutusjuht: Globaalse veebiseminari ajakava koostamine

Probleem: Planeerite veebiseminari kell 15:00 UTC. Peate igale kasutajale näitama algusaega tema kohalikus ajavööndis ja loendurit.

Lahendus `Temporal.ZonedDateTime` abil:

            // 1. Määrake sündmuse aeg UTC-s
const webinarInstant = Temporal.Instant.from('2025-03-15T15:00:00Z');

// 2. Hankige kasutaja ajavöönd (päris rakenduses veebilehitsejast või kasutajaprofiilist)
const userTimeZone = 'Europe/Berlin'; // Näide

// 3. Teisendage veebiseminari aeg kasutaja ajavööndisse
const webinarInUserZone = webinarInstant.toZonedDateTimeISO(userTimeZone);
console.log(`Veebiseminar algab kell: ${webinarInUserZone.toPlainTime()} teie ajavööndis.`);
// Väljund: "Veebiseminar algab kell: 16:00:00 teie ajavööndis." (Berliin on märtsis UTC+1)

// 4. Looge loendur
function updateCountdown() {
  const now = Temporal.Now.instant();
  const timeRemaining = webinarInstant.since(now, { largestUnit: 'day' });
  console.log(`Aega jäänud: ${timeRemaining.days} päeva, ${timeRemaining.hours} tundi, ${timeRemaining.minutes} minutit.`);
}

// Kutsuge updateCountdown() perioodiliselt välja
setInterval(updateCountdown, 1000);
            

              
                Copy
              
            
          

Kasutusjuht: Täpne vanuse ja aastapäevade arvutamine

Probleem: Kellegi vanuse või sündmusest möödunud aja täpne arvutamine on Date-objektiga liigaastate ja ajakomponentide tõttu keeruline.

Lahendus `Temporal.PlainDate` abil:

            const birthDate = Temporal.PlainDate.from('1990-06-25');
const today = Temporal.Now.plainDateISO();

const age = today.since(birthDate, { largestUnit: 'year' });

console.log(`Te olete ${age.years} aastat, ${age.months} kuud ja ${age.days} päeva vana.`);
            

              
                Copy
              
            
          

Kasutusjuht: Tellimuste arveldustsüklite haldamine

Probleem: „Ühe kuu” lisamine kuupäevale nagu 31. jaanuar võib olla mitmetähenduslik. Kas sellest saab 28. (või 29.) veebruar? Vana Date-objekt keriks sageli edasi märtsikuusse.

Lahendus `Temporal.PlainDate` ja valikute abil:

            const subscriptionStart = Temporal.PlainDate.from('2024-01-31');

// Lisage üks kuu. Temporal käsitleb liigaasta loogikat korrektselt.
const nextBillingDate = subscriptionStart.add({ months: 1 });
console.log(nextBillingDate.toString()); // "2024-02-29" (kuna 2024 on liigaasta)

const anotherStart = Temporal.PlainDate.from('2023-01-31');
const nextBillingForNonLeap = anotherStart.add({ months: 1 });
console.log(nextBillingForNonLeap.toString()); // "2023-02-28"
            

              
                Copy
              
            
          

Jõudlus, paketi suurus ja tootmisvalmidus

On oluline olla praktiline. Iga polyfilli lisamine suurendab teie rakenduse paketi suurust. @js-temporal/polyfill on kõikehõlmav ja 2023. aasta lõpu seisuga lisab see teie paketile umbes 20-30 kB (gzipped). Kuigi see pole tähtsusetu, peaksite seda kaaluma alternatiivide vastu:

• Raskekaalulise, kolmanda osapoole kuupäevateegi nagu Moment.js (nüüdseks pärandprojekt) või date-fns kasutamine. Temporal polyfill on sageli sarnase suurusega, kuid sellel on oluline eelis olla tulevane standard.
• Keerulise, vigaderohke käsitsi kuupäevaloogika kirjutamine. Kulu arendaja ajale ja potentsiaalsetele vigadele ületab sageli mõne kilobaidi suuruse polyfilli kulu.

Kas see on tootmisvalmis? Jah. Polyfill on stabiilne, hästi testitud ja järgib ametlikku spetsifikatsiooni. Seda kasutades investeerite tulevikukindlasse koodibaasi.

Tulevikutee: Polyfillist natiivse implementatsioonini

Temporal API ettepanek on 4. etapis, mis tähendab, et see on lõplikult vormistatud ja valmis lisamiseks ECMAScripti standardisse. Veebilehitsejate ja mootorite arendajad töötavad nüüd aktiivselt natiivsete implementatsioonide kallal. 2023. aasta lõpu / 2024. aasta alguse seisuga leiate selle mõnes veebilehitsejas funktsioonilipu taga.

Üleminek on sujuv. Polyfill kontrollib, kas natiivne Temporal-objekt on olemas. Kui on, ei tee polyfill midagi. Kui ei ole, loob see globaalse Temporal-objekti. See tähendab, et kui teie kasutajad oma veebilehitsejaid uuendavad, hakkab teie rakendus automaatselt kasutama kiiremat, natiivset implementatsiooni, ilma et peaksite muutma ühtegi rida koodi.

Kokkuvõte: Sinu järgmine samm kaasaegses JavaScriptis

JavaScripti `Date`-objektiga võitlemise päevad on loetud. Temporal API pakub robustset, intuitiivset ja võimast alternatiivi, mis lahendab reaalseid probleeme elegantsi ja täpsusega. Võttes kasutusele Temporal Polyfilli, ei kasuta te lihtsalt uut teeki; te muudate oma rakendused tulevikukindlaks ja viite oma koodi vastavusse JavaScripti keele ametliku suunaga.

Olenemata sellest, kas ehitate lihtsat ajaplaneerimisriista või keerulist globaalset platvormi, on Temporalist saadav selgus ja usaldusväärsus tohutu. Lõpetage võitlus `getMonth()`-ga. Lõpetage muretsemine ajavööndite pärast. Alustage puhtama, turvalisema ja väljendusrikkama kuupäeva- ja ajakoodi kirjutamist juba täna. Teie tulevane mina – ja teie rahvusvahelised kasutajad – tänavad teid.